import { ValidateErrorInfo } from '@/ts/base/model';
import { CloseOutlined } from '@ant-design/icons/lib';
import { Alert, Button, Checkbox, Table } from 'antd';
import React, { ReactNode, useMemo, useState } from 'react';
import cls from './index.module.less';
import { ColumnType } from 'antd/lib/table';

interface ValidateTableProps {
  validateErrors: ValidateErrorInfo[];
  onErrorClick?: (error: ValidateErrorInfo) => void;
  renderPosition?: (error: ValidateErrorInfo) => ReactNode;
  children?: ReactNode;
  style?: React.CSSProperties;
}

interface ErrorLevelConfig {
  value: string;
  label: string;
  color: string;
  backgroundColor: string;
}

const errorLevels: ErrorLevelConfig[] = [
  {
    value: 'error',
    label: '错误',
    color: '#F43F3F',
    backgroundColor: '#FFECE8',
  },
  {
    value: 'warning',
    label: '警告',
    color: '#E37318',
    backgroundColor: '#FFF1E9',
  },
  {
    value: 'info',
    label: '提醒',
    color: '#366EF4',
    backgroundColor: '#EDEFFF',
  },
];

const errorLevelMap = errorLevels.reduce((a, v) => {
  a[v.value] = v;
  return a;
}, {} as Dictionary<ErrorLevelConfig>);

export const ValidateMessageTable: React.FC<ValidateTableProps> = (props) => {
  const [filterTypes, setFilterTypes] = useState(['error', 'warning', 'info']);
  const filterValidateErrors = useMemo(
    () => props.validateErrors.filter((item) => filterTypes.includes(item.errorLevel)),
    [props.validateErrors, filterTypes],
  );

  function renderPosition(error: ValidateErrorInfo) {
    let content: ReactNode = error.position || '';
    if (props.renderPosition) {
      content = props.renderPosition(error);
    }
    return content;
  }

  // 定义表格列配置
  const columns: ColumnType<ValidateErrorInfo>[] = [
    {
      title: '错误类型',
      dataIndex: 'errorLevel',
      width: 100,
      align: 'center',
      onCell: (data) => {
        const { color, backgroundColor } = errorLevelMap[data.errorLevel || 'error'];
        return {
          style: {
            color,
            backgroundColor,
          }
        };
      },
      render: (text) => {
        const c = errorLevelMap[text || 'error'];
        return c.label;
      },
    },
    {
      title: '位置',
      width: 400,
      dataIndex: 'position',
      render: (text, record) => (
        <span onClick={() => props.onErrorClick?.(record)}>
          {renderPosition(record)}
        </span>
      ),
    },
    // {
    //   title: '编码',
    //   dataIndex: 'errorCode',
    //   width: 200,
    // },
    {
      title: '错误信息',
      dataIndex: 'message',
      render(value, record, index) {
        return <pre className={cls['error-message']}>
          {value}
        </pre>
      },
    },
  ];

  return (
    <div className={cls['validate-message-table']} style={props.style || {}}>
      <div className={cls['validate-message-header']}>
        <span>校验信息</span>
        <Checkbox.Group
          options={errorLevels}
          defaultValue={filterTypes}
          onChange={setFilterTypes as any}
        />
        {props.children}
      </div>
      <Table
        style={{height: '350px'}}
        size="small"
        scroll={{ y: 300, x: true }}
        dataSource={filterValidateErrors}
        pagination={false}
        columns={columns}
      />
    </div>
  );
};
